<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header class="head">产品信息列表</el-header>
        <el-main>
          <div class="main-top">
            <div class="btn">
              <el-button type="primary" @click="newht">新增产品</el-button>
            </div>
            <div class="ipt">
              <el-input
                v-model="input2"
                class="ipt1"
                placeholder="请输入关键字"
              >
              </el-input>
              <el-select v-model="select" placeholder="全部" class="iptselt">
                <el-option label="全部" value="1" />
                <el-option label="编号" value="2" />
                <el-option label="机构名称" value="3" />
                <el-option label="产品状态" value="4" />
                <el-option label="产品类别" value="5" />
                <el-option label="经办人" value="6" />
                <el-option label="联系人" value="7" />
                <el-option label="使用状态" value="8" />
                <el-option label="IP段" value="9" />
                <el-option label="合同编号" value="10" />
                <el-option label="开通日期" value="11" />
                <el-option label="通知状态" value="12" />
                <el-option label="审核状态" value="13" />
              </el-select>
              <el-button type="primary">查询</el-button>
            </div>
          </div>
          <el-table :data="tableData.list" style="width: 100%" class="tab">
            <el-table-column prop="id" label="编号" width="180" />
            <el-table-column prop="productname" label="产品名称" width="80" />
            <el-table-column prop="name" label="经办人" width="80" />
            <el-table-column prop="phone" label="电话" width="100" />
            <el-table-column prop="age" label="年龄" width="80" />
            <el-table-column prop="sex" label="性别" width="50" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="address" label="地址" />
            <!-- <el-table-column prop="date" label="日期" /> -->
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="editRow(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.row)"
                  >删除</el-button
                >
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.row)"
                  >查询</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-pagination
          background
          v-model="tableData.list"
          layout="prev, pager, next"
          :total="50"
          :page-sizes="[20, 40, 60, 80, 100]"
        />
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter, RouterLink, RouterView } from "vue-router";
import axios from "axios";

//定义响应式数据
var tableData = reactive({ list: [] });
var router = useRouter();
onMounted(() => {
  axios.get("/api/user/list").then((res) => {
    console.log(res.data.list);
    tableData.list = res.data.list;
  });
});

//定义函数
var deleteRow = (row) => {
  axios.post("/api/user/delete", { id: row.id }).then((res) => {
    console.log("delete", res.data);
    tableData.list = res.data.list;
  });
};
var editRow = (row) => {};
var newht = () => {
  router.push("/index/home/lsl/Newproducts");
};

</script>

<style scoped>
.head {
  text-align: center;
  font-weight: bolder;
}
.main-top {
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid gainsboro;
  /* background-color: aqua; */
}
.btn {
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* background-color: chartreuse; */
}
.ipt {
  width: 500px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* background-color: fuchsia; */
}
.ipt1 {
  width: 280px;
  height: 30px;
}
.iptselt {
  width: 125px;
  height: 25px;
}

.tab {
  font-size: 13px;
  text-align: center;
}
</style>
